<template>
  <view class="confirm-dialog" v-if="visible">
    <view class="dialog-mask"></view>
    <view class="dialog-content">
      <!-- 标题 -->
      <view class="dialog-title">{{ title }}</view>
      
      <!-- 按钮组 -->
      <view class="dialog-buttons">
        <!-- 确认按钮 -->
        <view class="confirm-btn" @click="handleConfirm">
          <text class="confirm-text">{{ confirmText }}</text>
        </view>
        
        <!-- 取消按钮 -->
        <view class="cancel-btn" @click="handleCancel">
          <text class="cancel-text">{{ cancelText }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 定义组件属性
const props = defineProps({
  title: {
    type: String,
    default: '是否删除该员工'
  },
  confirmText: {
    type: String,
    default: '确认删除'
  },
  cancelText: {
    type: String,
    default: '取消'
  }
})

// 定义组件事件
const emit = defineEmits(['confirm', 'cancel'])

// 控制弹窗显示
const visible = ref(false)

// 打开弹窗方法
const open = () => {
  visible.value = true
}

// 关闭弹窗方法
const close = () => {
  visible.value = false
}

// 确认按钮处理
const handleConfirm = () => {
  emit('confirm')
  close()
}

// 取消按钮处理
const handleCancel = () => {
  emit('cancel')
  close()
}

// 暴露方法给父组件
defineExpose({
  open,
  close
})
</script>

<style scoped>
.confirm-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.dialog-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.dialog-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500rpx;
  background: #FFFFFF;
  padding: 56rpx 64rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dialog-title {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.dialog-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.confirm-btn {
  width: 100%;
  height: 82rpx;
  background: #F2B642;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.confirm-text {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
}

.cancel-btn {
  width: 100%;
  height: 82rpx;
  background: #FFFFFF;
  border: 2rpx solid rgba(0,0,0,1);
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cancel-text {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
}
</style>